import React, { Component } from 'react';
import '../../style/Index/Tabber.css'
import { Badge, TabBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom';
import { AppOutline, UnorderedListOutline, TruckOutline, UserOutline } from 'antd-mobile-icons'
class Tabber extends Component {
    constructor(props) {
        super(props)
        this.state = {
            currentindex: 0,
            tabberlist: [
                {
                    key: '/index/indexx',
                    title: '首页',
                    icon: <AppOutline />,
                    badge: Badge.dot,
                },
                {
                    key: '/index/cartt',
                    title: '分类',
                    icon: <UnorderedListOutline />,
                    badge: '5',
                },
                {
                    key: '/index/shopcar',
                    title: '购物车',
                    icon: <TruckOutline />,
                    badge: '5',
                },
                {
                    key: '/index/mine',
                    title: '我的',
                    icon: <UserOutline />,
                    badge: '5',
                },

            ]
        }
    }   
    onChange(key){
        this.props.history.push(key)
    }
    render() {
        return (
            <div className='tabber'>
                {
                    <TabBar onChange={(key)=>{this.onChange(key)}}>
                        {
                            this.state.tabberlist.map(item => (
                                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                            ))
                        }
                    </TabBar>
                }

            </div>
        );
    }
}

export default withRouter(Tabber) ;